import { Button, DotLoading, InfiniteScroll, Empty } from 'antd-mobile'
import styles from '../index.module.less'
import { observer, useLocalObservable } from 'mobx-react'
import Store from '../store'
import { useEffect } from 'react'
import { getDate } from '@/utils/formatterDate'

export default observer(() => {
    const { classList, classHasMore, classListParams, setClassParams } = useLocalObservable(
        () => Store,
    )

    async function loadMore() {
        setClassParams({
            page: classListParams.page + 1,
        })
    }

    const StatusStyleMap = {
        1: 'accepted',
        0: 'preAccepted',
        2: 'reject',
    }

    useEffect(() => {
        setClassParams({ search: true })
    }, [])

    return (
        <div className={styles.content}>
            {classList.length > 0 ? (
                <>
                    {classList.map(item => (
                        <div className={styles.listItem} key={item.id}>
                            <div className={styles.infoView}>
                                <div className={styles.title}>
                                    <span>{item.name}</span>
                                    <div
                                        className={
                                            styles[StatusStyleMap[item.province_check_status]]
                                        }
                                    >
                                        待接受
                                    </div>
                                </div>
                                <span>地点： 湖北省襄阳市</span>
                                <span>
                                    培训时间： {getDate(item.start_time)}至{getDate(item.end_time)}
                                </span>
                            </div>
                            <div className={styles.handleView}>
                                <Button className={styles.acceptBtn}>接受派遣</Button>
                            </div>
                        </div>
                    ))}
                    <InfiniteScroll loadMore={loadMore} hasMore={classHasMore}>
                        {classHasMore ? (
                            <>
                                <span>Loading</span>
                                <DotLoading />
                            </>
                        ) : (
                            <span>~ 人家也是有底的 ~</span>
                        )}
                    </InfiniteScroll>
                </>
            ) : (
                <Empty description="暂无数据" />
            )}
        </div>
    )
})
